<script>
export default {
  data() {
    return {
      counter: 0,
      name: "zhangli",
      collapsed: false
    }
  },
  methods: {
    doSth: function () {

    },

    headMemuChangeHandler: function (active) {
      console.log('head memu change', active);

    },

    sidememuChangeHandler: function (active) {
      console.log('side memu change', active);
    },

    changeCollapsed:function(){
      this.collapsed = !this.collapsed 
    }
  },

}
</script>


<template>
  <t-layout>
    <t-header>
      <t-head-menu theme="light" default-value="home" height="120px" @change="headMemuChangeHandler">
        <template #logo>
          <img width="136" class="logo" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo" />
        </template>
        <t-menu-item value="home"> <router-link to="/">首页</router-link> </t-menu-item>
        <t-menu-item value="addadvice"> <router-link to="/enterAdvice">添加建议</router-link> </t-menu-item>

        <template #operations>
          <router-link to="/"><t-icon class="t-menu__operations-icon" name="search" /></router-link>
          <router-link to="/enterAdvice"><t-icon class="t-menu__operations-icon" name="add-rectangle" /></router-link>
          <router-link to="/user"><t-icon class="t-menu__operations-icon" name="user" /></router-link>
        </template>
      </t-head-menu>
    </t-header>

    <t-layout>
      <t-aside>
        <t-menu theme="light" default-value="home" :collapsed="collapsed" @change="sideMemuChangeHandler">
          <t-menu-item value="home" @click="$router.push('/')">
            <template #icon>
              <t-icon name="home" />
            </template>
            首页
          </t-menu-item>
          <t-menu-item value="addadvice" @click="$router.push('/enterAdvice')">
            <template #icon>
              <t-icon name="add-rectangle" />
            </template>
            添加建议
          </t-menu-item>
          <t-menu-item value="user" @click="$router.push('/user')">
            <template #icon>
              <t-icon name="user" />
            </template>
            用户注册
          </t-menu-item>
          <t-menu-item value="chart" @click="$router.push('/bar')">
            <template #icon>
              <t-icon name="chart" />
            </template>
            图表
          </t-menu-item>
          <t-menu-item value="chart" @click="$router.push('/random')">
            <template #icon>
              <t-icon name="chart" />
            </template>
            随机图表
          </t-menu-item>
          <t-menu-item value="chart" @click="$router.push('/ohlc')">
            <template #icon>
              <t-icon name="chart" />
            </template>
            走势图
          </t-menu-item>
          <t-menu-item value="precise-monitor">
            <template #icon>
              <t-icon name="precise-monitor" />
            </template>
            精准监控
          </t-menu-item>
          <t-menu-item value="mail">
            <template #icon>
              <t-icon name="mail" />
            </template>
            消息区
          </t-menu-item>
          <t-menu-item value="user-circle">
            <template #icon>
              <t-icon name="user-circle" />
            </template>
            个人中心
          </t-menu-item>
          <t-menu-item value="play-circle">
            <template #icon>
              <t-icon name="play-circle" />
            </template>
            视频区
          </t-menu-item>
          <t-menu-item value="edit1">
            <template #icon>
              <t-icon name="edit-1" />
            </template>
            资源编辑
          </t-menu-item>
          <t-menu-item value="operations" @click="changeCollapsed">
                <template #icon>
                  <t-icon name="view-list" />
                </template>
            展开|收拢
          </t-menu-item>


        </t-menu>
      </t-aside>
      <t-content>
        <router-view></router-view>
      </t-content>
    </t-layout>

    <t-footer>
      <t-row justify="center">
        <div> Copyright © 2019-2023 KKDAXUE Rights Reserved.
        </div>
      </t-row>
    </t-footer>
  </t-layout>
</template>